<template>
  <div id='tmpl'>
     <div class='sub'>
         <h4>提交评论</h4>
         <p></p>
         <textarea placeholder='请输入您的内容' v-model='com'></textarea>
         <mt-button type="primary" size="large" @click='sendComment'>提交</mt-button>
     </div>
     <div id="list">
			<h3>评论列表</h3>
			<p class="p"></p>
			<div v-for='(item,index) in list'>
				<div class="title">
					<span>第{{index+1}}楼:</span>
					<span>用户:{{item.user_name}}</span>
					<span>发表时间：{{item.add_time | datefmt('YYYY-MM-DD HH:mm:ss')}}</span>
				</div>
				<ul class="mui-table-view">
					<li class="mui-table-view-cell" v-text='item.content'></li>
				</ul>
			</div>
            <mt-button type="danger" size="large" plain @click='getmore'>加载更多</mt-button> 
	</div>
  </div>
</template>
<script>
import {Toast} from 'mint-ui';
import qs from 'qs'
export default {
  name: "comment",
  data () {
    return {
       list:[],
       pageindex:'',
       com:''
    };
  },
   props:['id'],
  created(){
      this.getCommonlist();

  },
  methods:{
      getmore(){
          this.pageindex++;
          this.getCommonlist(this.pageindex);

      },
      getCommonlist(pageindex){
          var pageindex=this.pageindex || 1;
          var url=this.common.domain+'/api/getcomments/'+this.id+'?pageindex='+pageindex;
          this.$http.get(url).then(function(res){
              var data=res.body;
              this.list=this.list.concat(data.message)
          })
      },
      sendComment(){
          var url=this.common.domain+'/api/postcomment/'+this.id;
          /* this.$http.post(url,{content:this.com},{emulateJSON:true}).then(function(res){
              if(this.com.trim().length==0){
                  Toast('输入的内容不能为空');
                  return
              }
              var data=res.body;
              Toast(data.message);
              this.list=[{
                     "user_name":"匿名用户",
                     "add_time":new Date(),
                     "content":this.com
                 }].concat(this.list)
                 this.com=''
          }) */
          var that =this;
          that.$axios.post(url,qs.stringify({content:that.com}))
          .then(function(res){
              if(that.com.trim().length==0){
                  Toast('输入的内容不能为空');
                  return
              }
             var data=res.data;
              Toast(data.message);
              that.list=[{
                     "user_name":"匿名用户",
                     "add_time":new Date(),
                     "content":that.com
                 }].concat(that.list)
                 that.com=''
          })
      }
  }
 
}
</script>
<style scoped>
.sub{
    padding:0 10px;
}
.sub p{
    width:100%;
    height: 1px;
    border-bottom:1px solid rgba(0,0,0,0.2)
}
#list{
	padding: 5px;
}
.title{
	padding: 5px;
	color: #6d6d72;
	font-size: 15px;
	background-color: rgba(0,0,0,0.1);
}
</style>